<template>
  <div class="merchant alltable">
    <div class="tabbar">
      <div class="let">
        <DatePicker
          type="date"
          placement="bottom-end"
          v-model="data_axios.startday"
          value = 'yyyy-MM-dd'
          placeholder="请选择开始日期"  
          style="width: 130px"
        ></DatePicker>&nbsp;
        <DatePicker
          type="date"
          placement="bottom-end"
          v-model="data_axios.endday"
          placeholder="请选择结束日期"
          style="width: 130px"
        ></DatePicker>&nbsp;        
        <Input
          prefix="ios-search"          
          v-model.trim="data_axios.selectinfo"
          placeholder="请输入关键字"
          style="width: 200px"
        />
        <Button class="btn_default" @click="search">
          <Icon type="ios-search" size="17" class="icon_wy"/>查询
        </Button>
      </div>
        <div class='rit'>              
            <Button @click="model2=true" ><Icon type="ios-add-circle-outline" size="17" class="icon_wy"/>添加结算单</Button>
      </div>
    </div>
    <div class="tabble">
      <div>
        <Table
          :columns="columns"
          :loading="loading"
          height="560"
          :data="data.datas"
          class="sel_table"
        ></Table>
      </div>
    </div>

    <div class="tab_pages">
      <Page
        :total="data.allCount"
        :page-size="data_axios.pagesize"
        :current.sync="data_axios.pagenumber"
        show-total
        @on-change="merchant_data"
      >
      </Page>
    </div>
    <!-- 添加结算单  -->
        <Modal title="添加结算单" v-model="model2" class-name="" :mask-closable="false">
            <div>
              <Form :model="add_data"   label-position="left"  :label-width="100" class='fomr'  ref="add_data"  :rules="fix_rules1">  
                <FormItem label="开始时间：" prop="startday" style="display: inline-block;">
                    <DatePicker :options="options3" type="date" v-model="add_data.startday" size="large" placeholder="请选择时间" ></DatePicker>                    
                </FormItem>
                <FormItem label="结束时间：" prop="endday" style="display: inline-block;">
                    <DatePicker :options="options4" type="date" v-model="add_data.endday" size="large" placeholder="请选择时间" ></DatePicker>
                </FormItem>
                <FormItem label="选择商户" prop="midlist">    
                  <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
                    <Checkbox
                        :indeterminate="indeterminate"
                        :value="checkAll"
                        @click.prevent.native="handleCheckAll">全选</Checkbox>
                  </div>

                    <CheckboxGroup v-model="add_data.midlist" v-for="(item,i) in Mnamelist" :key="i">
                        <Checkbox :label="item.mid">{{item.cname+'/'+item.mname}}</Checkbox>                        
                    </CheckboxGroup>
                </FormItem>
              </Form>
            </div>
            <div slot="footer">
                <Button size="large"  @click="model2=false">关闭</Button>
                <Button type="primary" @click="handleSubmit1(add_data)" size="large" :loading="add_modal_loading">预览</Button>
            </div>
        </Modal>
  </div>
</template>
<script>
import { setAdmin, setToken, getAdmin } from "../../../utils/auth.js";
import { selectSettleList,selectSettleDet,selectMname} from "../../../apis/api_system.js";
import filter from './../../../filters/filter';
// import { validatePhone ,validateIdnumber} from "../../../utils/validate.js";
export default {
  name: "bus_listing",
  data() {
    return {
      indeterminate: true,
      checkAll: false,
      checkAllGroup: ['香蕉', '西瓜'],
      userId: "",      
      model2: false,
      fix_modal_loading:false,
      add_modal_loading:false,
      value: "",
      userName:"",
      options3: {
          disabledDate (date) {
              return date && date.valueOf() > Date.now()-86400000;
          }
      },
      options4: {
          disabledDate (date) {
              return date && date.valueOf() > Date.now()-86400000;
          }
      },
      data: {
        allCount: 0,
        currPage: 1,
        datas: [],        
      },
      data_axios: {
        startday:"",
        endday: "",
        pagesize: 10,
        pagenumber: 1,        
        selectinfo: "",        
      },
      fix_data:{
      },
      add_data:{
        midlist: [],
        startday:"",
        endday:"",
      },
      loading: false,
      Mnamelist: [],
      
      columns: [
        {
          title: "序号",
          key: "name",
          type: "index",
          width: 50
        },
        {
          title: "结算单号",
          key: "id"
        },
        {
          title: "创建时间",
          key: "createdate",
        //    width: 100
        },
        {
          title: "创建人",
          key: "createusername"
        },
        {
          title: "订单金额",
          key: "paymentamt",
        //   width: 100
        },
        {
          title: "手续费 ",
          key: "poundage"
        //   ,
        //   width: 100
        },        
        
        {
          title: "结算金额 ",
          key: "settleamt",
        //    width: 200
        },
        {
          title: "结算条数 ",
          key: "settlecount",
            // width: 150
        },
        {
          title: "时间",
          key: "startday",
          render: (h, params) => {
            const row = params.row;
            // 1已完成 2已退款
            const text = row.startday+'至'+ row.endday;
            return <span>{text}</span>;
          }
        },       
        
        {
          title: "操作",
          key: "",
         
          render: (h, params) => {
            let self = this;
            return (
              <div class="lastcoll">
              <i
                  on-click={() => self.to_detail(params)}
                  class="ivu-icon ivu-icon-ios-paper-outline icon_weight"
                  title="详情"
                >
                  详情
                </i>
               
                
              </div>
               // <i
                //   on-click={() => self.setmodal_edit(params)}
                //   class="ivu-icon ivu-icon-ios-create-outline icon_weight"
                //   title="修改"
                // >
                //   修改
                // </i>
            //   <i
            //       on-click={() => self.del(params)}
            //       class="ivu-icon ivu-icon-ios-trash-outline icon_weight"
            //       title="删除"
            //     >
            //       删除
            //     </i>
            );
          }
        }
      ],
      fix_rules1:{
        //   不能为空
        startday: [{ required: true, message: "开始时间不能为空"}],
        endday: [{ required: true, message: "结束时间不能为空" },
            {validator:(rule, value, callback)=>{             
              if(value >= this.add_data.startday){
                  callback();
              }else{
                  callback(new Error('结束时间不能小于开始时间'));
              };
            }}
        ],
        midlist:[{required: true, message: "请至少选择一个商户"}]
      }
    };
  },
  
  mounted() {    
    let info = getAdmin();   
    this.userId = info.id;
    this.userName = info.name;        
    this.selectSettleList(this.data_axios);
    this.selectMname();
  },
  methods: {
    // 全选
     handleCheckAll () {
          if (this.indeterminate) {
              this.checkAll = false;
          } else {
              this.checkAll = !this.checkAll;
          }
          this.indeterminate = false;
          if (this.checkAll) {            
               var arr = [];
               for (let i = 0; i <  this.Mnamelist.length; i++) {                
                 arr.push(this.Mnamelist[i].mid);                 
               } 
              
              this.add_data.midlist = arr;
          } else {
              this.add_data.midlist = [];
          }
      },
    //   获取服务商名字
    selectMname() {         
      let data = JSON.stringify({
        requestString: JSON.stringify({}),
        userId: this.userId,
        fullname: "结算单列表"
      });
      selectMname(data)
        .then(({ returnString, code, disp }) => {
          if (code == 200) {
            this.Mnamelist = JSON.parse(returnString);
           
          } else {           
            this.$Message.warning(disp);
          }
        })
        .catch(err => {});
    },
    //   获取结算单列表
    selectSettleList(info) {     
        this.loading = true; 
       if(this.data_axios.startday!=''){
          this.data_axios.startday =  filter.FileterDate(this.data_axios.startday);
       }
       if(this.data_axios.endday!=''){
          this.data_axios.endday =  filter.FileterDate(this.data_axios.endday);
       }      
      let data = JSON.stringify({
        requestString: JSON.stringify(info),
        userId: this.userId,
        fullname: "结算单列表"
      });     
      selectSettleList(data).then(({ returnString, code, disp ,count}) => { 
          this.loading = false;
          if (code == 200) {    
           
            this.data.datas = JSON.parse(returnString);
            this.data.allCount = count;            
          } else {            
            this.$Message.warning(disp);
          }
        })
        .catch(err => {
            this.$Message.warning('请求出错');
        });
    },
    handleSubmit1(name){     
      this.$refs["add_data"].validate(valid => {
            if (valid) {
            this.add_modal_loading =true;
              this.preview();
            }
        });
    },
    // 提交预览
    preview(){
      if(this.add_data.startday!=''){
          this.add_data.startday =  filter.FileterDate(this.add_data.startday);
       }
       if(this.add_data.endday!=''){
          this.add_data.endday =  filter.FileterDate(this.add_data.endday);
       } 
       this.$router.push({path: 'preview_of_statement', query: {data: this.add_data}});      
    },
    //   添加商户
    add_business() {
        this.model2 = true;
    },
    //分页改变
    merchant_data() {
       this.selectSettleList(this.data_axios);
    },
    search(){
      this.data_axios.pagenumber=1;
      this.selectSettleList(this.data_axios);
    },
    // 查看详情
    to_detail(data){      
      this.$router.push({path: 'detail_statement_settlement', query: {id: data.row.id}})
    }
  }
};
</script>
<style scoped=true>
  .ivu-checkbox-group{
    display: inline-block;
  }
</style>